<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="datepicker/skin/WdatePicker.css" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.wrap {
				width: 90%;
				margin: 0 auto;
			}

			.btn {
				float: right;
			}

			#template {
				display: none;
			}

			#mask {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, .5);
				display: none;
			}

			#box {
				padding: 20px 50px;
				width: 600px;
				background-color: #fff;
				border-radius: 10px;
				transform: translate(-50%, -50%);
				position: fixed;
				top: 50%;
				left: 50%;
				display: none;
			}

			#box h2 {
				margin-bottom: 20px;
			}

			select {
				margin-top: 5px;
			}
			h5 span{
			 cursor: pointer;
			 font-weight: normal;
			 color: #0099CC;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<button type="button" class="btn btn-primary" id="add">+新增学生</button>
			<table class="table">
				<h2>学生信息管理系统</h2>
				<h5>
					<span id="data-username"></span>
					<span id="data-type"></span>
					：您好
					<span id="data-exit">退出登录</span>
				</h5>
				<thead>
					<tr>
						<th>学号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>所在城市</th>
						<th>入学时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr id="template">
						<td class="data-id"></td>
						<td class="data-name"></td>
						<td class="data-age"></td>
						<td class="data-sex"></td>
						<td class="data-city"></td>
						<td class="data-joinDate"></td>
						<td>
						<td>
							<button type="button" class="btn btn-primary data-edit">编辑</button>
							<button type="button" class="btn btn-danger data-delete">删除</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div id="mask"></div>
		<div id="box">
			<h2>添加学生</h2>
			<div class="form-horizontal">
				<div class="form-group">
					<label for="data-name" class="col-sm-2 control-label">学生姓名</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" id="data-name" placeholder="学生姓名">
					</div>
				</div>

				<div class="form-group">
					<label for="data-age" class="col-sm-2 control-label">年龄</label>
					<div class="col-sm-10">
						<input type="number" class="form-control" id="data-age" placeholder="年龄">
					</div>
				</div>

				<div class="form-group">
					<label for="data-sex" class="col-sm-2 control-label">性别</label>
					<label class="radio-inline">
						<input type="radio" name="sex" id="man">男
					</label>
					<label class="radio-inline">
						<input type="radio" name="sex" id="data-female" checked>女
					</label>
				</div>

				<div class="form-group">
					<label class="col-sm-2 control-label">所在城市</label>
					<select name="" id="province"></select>
					<select name="" id="city"></select>
					<select name="" id="area"></select>
				</div>


				<div class="form-group">
					<label class="col-sm-2 control-label">入学日期</label>
					<div class="col-sm-10">
						<input type="input" class="form-control" id="data-joinDate" placeholder="入学日期" onclick="WdatePicker()">
					</div>
				</div>

				<div class="form-group" style="float:right;margin-top:20px;">
					<button id="submit" class="btn btn-primary">确认添加</button>
					<button id="cancel" class="btn btn-default">取消</button>
				</div>
			</div>

		</div>
		<script src="jquery.min.js"></script>
		<script src="datepicker/WdatePicker.js"></script>
		<script src="citys.js"></script>
		<script src="common.js"></script>
		<script>
			<!-- 登录验证 -->
			let userInfo=sessionStorage.getItem("userInfo") || document.cookie.replace("userInfo=","");
			if(!userInfo){
				location.href=`${address}/login.html`
			}
			// 展示用户信息并且退出登录
			// console.log(JSON.parse(userInfo))
			let r=JSON.parse(userInfo)
			// let user=JSON.parse(userInfo[0]);
			// let type=JSON.parse(userInfo[0].type ? "同学" : "老师")
			$("#data-username").html(r[0].username);
			$("#data-type").html(r[0].type ? "同学" : "老师")
			$("#data-exit").click(function(){
				sessionStorage.removeItem("userInfo");
				document.cookie="userInfo=xxxx;expires=" + new Date("1990-2-1")
				location.href=`${address}/login.html`
			})
			let tem = $("#template")
			let tbody = $("#list")
			// 删除请求
			tem.find(".data-delete").click(function() {
				let nowItem = $(this).closest("tr");
				if (confirm(`真的要删除${nowItem.find(".data-name").html()}同学吗？此项操作不可逆哦！`)) {
					$.ajax({
						url: `${address}/deleteStudent`,
						data: {
							id: $(this).closest("tr").find(".data-id").html()
						},
						success(data) {
							if (data === "success") {
								nowItem.fadeOut();
							} 
							else {
								alert("删除失败");
							}
						},
					})
				}
			})
			// 添加请求
			$("#submit").click(function(){
				if($("#data-name").val() && $("#data-age").val() && $("#data-joinDate").val()){
					$.ajax({
						url:`${address}/addStudent`,
						data:{
							name:$("#data-name").val(),
							age:$("#data-age").val(),
							sex:$("#data-female").val()[0].checked ? 1 : 0,
							city: $("#province").val() + $("#city").val() + $("#area").val(),
							joinDate:$("#data-joinDate").val()
						},
						success(data){
							if(data==="success"){
								history.go(0)
							}
							else{
								alert("新增学生失败")
							}
						}
					})
				}
				
			})
			// 点击添加显示弹出层遮罩层
			$("#add").click(function(){
				// console.log(add)
				$("#mask").fadeIn()
				$("#box").fadeIn()
				$("#data-name").focus()
			})
			// 点击取消遮罩层和弹出层消失
			$("#cancel").click(function(){
				$("#mask").fadeOut()
				$("#box").fadeOut()
			})
			window.onkeydown = function(event) {
				if (event.keyCode === 13) {
					$("#submit").click()
				}
				if (event.keyCode === 27) {
					$("#cancel").click()
				}
			}
			// 编辑
			$(".data-edit").click(function(){
				// console.log(this)
				// console.log($(".data-edit"))
				$("#mask").fadeIn()
				$("#box").fadeIn()
				$("#data-name").focus()
				$("h2").html("编辑学生")
				$("#submit").html("确认修改")
				$("#data-name").val($(this).closest("tr").find(".data-name").html())
				$("#data-age").val($(this).closest("tr").find(".data-age").html())
				$(this).closest("tr").find(".data-sex").html() === "男" ? $("#man").attr("checked","checked") : $("#data-female").attr("checked","checked")
				$("#recity").val($(this).closest("tr").find("#data-city").html())
				$("#data-joinDate").val($(this).closest("tr").find(".data-joinDate").html())
				$("#submit").click(function(){
					if($("#box").find("#submit").html() === "修改学生信息"){
					if($("#data-name").val() && $("#data-age").val() && $("data-joinDate").val()){
					$.ajax({
					 url:`${address}/editStudent`,
						data:{
						  id:$("#data-id").html(),
						  name:$("#data-name").val(),
						  age:$("#data-age").val(),
						  sex:$("#data-female")[0].checked ? 0 : 1,
						  city:province.val()+city.val()+area.val(),
						 date:$("#data-date").val()
							},
							success(data){
							if(data === "success"){
								history.go(0)
							}
								alert("修改成功")
							}
						})
					}
					}
				})
			})
			// 插入			
			$.ajax({
				url: `${address}/getuser`,
				success(data) {
					data.forEach(item => {
						let copy = tem.clone(true);
						copy.attr("id", "")
						copy.find(".data-id").html(item.id)
						copy.find(".data-name").html(item.name)
						copy.find(".data-age").html(item.age)
						copy.find(".data-sex").html(item.sex === "1" ? "男" : "女")	
						copy.find(".data-city").html(item.city)
						copy.find(".data-joinDate").html(item.joinDate)
						copy.appendTo(tbody)
					})
				}
			})
		</script>
	</body>
</html>
